<template>
  <div class="subPage">
    <scroll-view scroll-y="true" v-if="invoiceList.length > 0">
      <div class="init">
        <div v-for="(item, index) in invoiceList" :key='index' class="li" @click="viewInvoice(item)" >
          <div class="itemTop clearfix">
            <span v-if="item.order_type=='01'">
              <img :src="outpatientIconImg" class="fl" />
              <span class="fl type">挂号费</span>
            </span>
            <span v-else>
              <img :src="prescriptIconImg" class="fl" />
              <span class="fl type">诊疗费</span>
            </span>
            <span class="fr topRight">
              <span class="invoiced"  v-if="item.invoice_status=='1'" >已开票</span>
              <span class="notInvoice" v-else >待开票</span>
            </span>
          </div>
          <div class="itemBtm clearfix">
            <div class="btmFlex">
              <div class="itemBtmFl">
                <div class="itemLine1 lineTitle nowrap" style="width:160rpx!important;">诊疗项目：</div>
                <div class="itemLine1 lineTitle" style="width:160rpx!important;" >就 诊 人：</div>
                <div class="itemLine1 lineTitle" style="width:160rpx!important;" >支付时间：</div>
                <div class="itemLine1 lineTitle" style="width:160rpx!important;" >费用合计：</div>
              </div>
              <div class="itemBtmFr nowrap">
                <div class="itemLine1 nowrap">{{item.order_str}}</div>
                <div class="itemLine1">
                  <span>{{item.regular_name}}</span>
                </div>
                <div class="itemLine1 nowrap">{{item.pay_time}}</div>
                <div class="itemLine1 nowrap">￥{{item.pay_value}}</div>
              </div>
            </div>
          </div>
          <div class="bottomBtn clearFix ">
            <span class="fixSpan"></span>
            <span class="doneBtn" v-if="item.invoice_status=='1'" @click.stop="viewQrcode(item)" >查看票据二维码</span>
            <span class="doneBtn" v-if="item.invoice_status=='1'" @click.stop="viewInvoice(item)" >查看票据</span>
            <span class="doneBtn" v-else  @click.stop="issueInvoice(item,index)" >票据</span>
          </div>
        </div>
      </div>
    </scroll-view>
    <div v-if="invoiceList.length===0 && !delayShowData" class="noDataImg">
      <img :src="noDataImg"/>
    </div>
  </div>
</template>
<script>
  import * as types from '@/store/types'
  import { mapState } from 'vuex'
  import api from '@/api/api'
import { $Toast } from '../../../../../static/iview/base'
  let app = getApp()
  export default {
    data() {
      return {
        invoiceList: [],
        page: 1,
        rows: 10,
        total: 0,
        imgUrl: '',
        prescriptIconImg: '',
        outpatientIconImg: '',
        noDataImg: '',
        delayShowData: true
      }
    },
    onLoad() {
      this.imgUrl = api.imgUrl
      this.prescriptIconImg = '/static/images/prescriptIcon.png'
      this.outpatientIconImg = '/static/images/outpatientIcon.png'
      this.noDataImg = this.imgUrl + 'noData.png'
      this.invoiceList = []
      this.queryInvoice()
    },
    // 上拉加载更多
    onReachBottom: function () {
      let up = Math.ceil(this.total)
      if (this.page === up) {
        return
      }
      this.page++
      this.queryInvoice()
    },
    // 下拉刷新
    onPullDownRefresh: function() {
      this.page = 1
      this.invoiceList = []
      this.queryInvoice()
    },
    methods: {
      // 查询个人信息
      queryInvoice () {
        let that = this
        that.delayShowData = true
        that.$api.userInvoiceManage({page: that.page, rows: 10, status: '03'},({'showLoading': true})).then((res) => {
          let list = []
          that.total = res.data.total / 10
          list = that.invoiceList.concat(res.data.rows)
          console.log((that.page*1-1)*that.rows )
          for (let i = (that.page-1)*that.rows ; i < list.length; i++) {
            list[i].pay_time = list[i].pay_time ? that.$utils.filterTime(list[i].pay_time, 7) : ''
          }
          that.invoiceList = list
          that.delayShowData = false
          wx.stopPullDownRefresh()
        })
      },
      // 查看二维码
      viewQrcode(item) {
        if(item.invoice_code) {
          this.$router.push(`/pages/center/child/qrCodePage/main?code=${item.invoice_code}` );
        } else {
          wx.showToast({
            title: '该票据暂无二维码展示',
            icon: 'none',
            duration: 2000
          })
        }
      },
      // 查看票据
      viewInvoice (item) {
        let url = item.invoice_url.replace('http','https')
        console.log(item.invoice_url,url)
        wx.setStorage({
          key: "invoiceUrl",
          data: url,
        });
        this.$router.push(
          `/pages/subPage/register/webView/main?invoice=1`
        );
      },
      // 开票据
      issueInvoice (item,index) {
        let that = this
        this.$api.userInvoiceIssue({order_id:item.order_id},{'showLoading':true}).then(res=>{
          let url = res.data.replace('http','https')
          console.log(res.data,url)
          wx.setStorage({
          key: "invoiceUrl",
          data: url,
            success (res) {
            console.log(res,'储存成功')
            that.$api.userInvoiceRefresh({order_id:item.order_id},{'showLoading':true}).then(res=>{
                that.$set(that.invoiceList[index],'invoice_status',res.data.invoice_status)
                that.$set(that.invoiceList[index],'invoice_url',res.data.invoice_url)
                that.$set(that.invoiceList[index],'invoice_code',res.data.invoice_code)
                that.$router.push(`/pages/subPage/register/webView/main?invoice=1`);
             })
            }
          });
        })
      }
    }
  }
</script>
<style scoped lang='less'>
  .subPage {
    background: #F9F9F9;
  }
  .init {
    background: #F9F9F9;
    overflow: hidden;
    height: 100%;
    padding-top: 30rpx;
    .li {
      margin: 0 30rpx 30rpx 30rpx;
      background:rgba(255,255,255,1);
      box-shadow:0px 2rpx 6rpx 0rpx rgba(0,0,0,0.05);
      border-radius:16rpx;
      // height: 310rpx;
      .itemTop {
        border-bottom: 1rpx solid #E9E9E9;
        height: 74rpx;
        line-height: 74rpx;
        .type {
          font-size: 28rpx;
          color: rgba(102, 102, 102, 1);
        }
        img {
          width: 44rpx;
          height: 44rpx;
          margin: 14rpx 7rpx 0 27rpx;
        }
        .topRight {
          font-size: 28rpx;
          margin-right: 25rpx;
          span:nth-child(1) {
            color: #999999;
          }
          .invoiced, .notInvoice{
            display: inline-block;
            padding: 0 23rpx;
            text-align: center;
            font-size: 28rpx;
            color: #258FF8!important;   
            height: 52rpx;
            line-height: 52rpx;
            background: #EBF5FF;
            border-radius: 25rpx;
          }
          .notInvoice {       
            background: #FFF5EE;
            color: #FF7F29!important;
          }
        }
      }
      .itemBtm {
        padding: 25rpx 20rpx 5rpx 28rpx;
        font-size: 32rpx;
        .xiegang {
          display: inline-block;
          color: #CCCCCC;
          margin: 0 10rpx;
        }
        .doctorName {
          display: inline-block;
          font-size: 44rpx;
          font-weight: bold;
          color: rgba(74, 113, 232, 1);
        }
        .btmFlex {
          display: flex;
          .itemBtmFl {
            color: #333;
            .lineTitle {
              font-size: 32rpx;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
            }
          }

          .itemBtmFr {
            margin-left: 30rpx;
            flex: 1;
          }

          .itemLine1 {
            height: 62rpx;
            line-height: 62rpx;
            margin-bottom: 3rpx;

            .btn {
              height: 50rpx;
              line-height: 50rpx;
              display: inline-block;
              padding: 0 22rpx;
              border-radius: 25rpx;
              font-size: 28rpx;
              margin-top: 10rpx;
            }
          }

          .itemLine2 {
            height: 60rpx;
            line-height: 60rpx;
          }
        }
      }
    }
  }
  .bottomBtn {
    padding: 0rpx 25rpx 25rpx 27rpx;
    height: 76rpx;
    display: flex;
    .fixSpan {
      flex: 1;
    }
    .doneBtn {
      padding: 0 39rpx;
      text-align: center;
      line-height: 76rpx;
      height: 76rpx;
      border-radius: 38rpx;
      border: 1px solid #ADADAD;
      font-size: 32rpx;
      font-weight: 400;
      color: #666666;
      letter-spacing: 2rpx;
      box-sizing: border-box;
      margin-left: 20rpx;
    }
  }
</style>
